<template>
  <div class="app-container">
    <div class="dashboard-text">负责的课程({{ list.length }})</div>
    <el-table v-loading="loading.coursesLoading" :data="list" element-loading-text="Loading" border highlight-current-row>
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="课程名称" width="250">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="课程类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="课程介绍" align="left">
        <template slot-scope="scope">
          {{ scope.row.desc }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showCoursesClass(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看课程班级 -->
    <el-dialog v-loading="loading.classLoading" title="课程班级" :visible.sync="dialogShow">
      <el-table :data="classList" border>
        <el-table-column property="name" label="班级名称" width="150" />
        <el-table-column property="type" label="班级性质" width="200" />
        <el-table-column property="desc" label="班级简介" />
        <el-table-column property="aveSource" label="班级平均分" align="center" />
        <el-table-column fixed="right" align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showClassStudent(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="班级学生" width="80%" :visible.sync="innerShow" append-to-body top="2vh">
        <el-table v-loading="loading.studentLoading" :data="studentList.data">
          <el-table-column property="studentNumber" label="学号" />
          <el-table-column property="nickname" label="姓名" />
          <el-table-column property="sex" label="性别" />
          <el-table-column fixed="right" align="center" label="操作">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.grades"
                v-loading="scope.row.loading"
                :controls="false"
                :min="0"
                :max="100"
                :step="0.1"
                controls-position="right"
                @keyup.enter.native="editGrades(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 10px; text-align: right;"
          background
          layout="prev, pager, next"
          :current-page="pagination.page"
          :page-size.sync="pagination.limit"
          :page-count="studentList.totalPage"
          :hide-on-single-page="studentList.total <= studentList.limit"
          @current-change="pageHandler"
        />
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { getDirectorCourses } from '@/api/courses'
import { coursesClass } from '@/api/class'
import { studentCourses, grades } from '@/api/student_courses'
import { Message } from 'element-ui'

export default {
  name: 'Stats',
  data() {
    return {
      list: [],
      loading: {
        coursesLoading: true,
        classLoading: true,
        studentLoading: true,
        editGrades: false
      },
      // 嵌套对话框
      dialogShow: false,
      innerShow: false,
      // 临时 id
      tempId: {
        coursesId: 0,
        classId: 0
      },
      classList: [],
      studentList: [],
      // 主要分页获取学生
      pagination: {
        page: 0,
        limit: 10
      }
    }
  },
  created() {
    this.getCoursesList()
  },
  mounted() {
    getDirectorCourses().then(res => {
      this.list = res.data
    })
  },
  methods: {
    getCoursesList() {
      this.loading.coursesLoading = true
      getDirectorCourses().then(response => {
        this.list = response.data
        this.loading.coursesLoading = false
      })
    },
    getCoursesClass() {
      this.loading.classLoading = true
      coursesClass(this.tempId.coursesId).then(res => {
        this.classList = res.data
      }).finally(() => {
        this.loading.classLoading = false
      })
    },
    getClassStudents() {
      this.loading.studentLoading = true
      const data = {
        page: this.pagination.page,
        limit: this.pagination.limit,
        classId: this.tempId.classId,
        coursesId: this.tempId.coursesId
      }
      studentCourses(data).then(res => {
        this.studentList = res.data
        // 追加 loading 默认状态
        this.studentList.data.map(item => {
          this.$set(item, 'loading', false)
          return item
        })
      }).finally(() => {
        this.loading.studentLoading = false
      })
    },
    /**
     * 页面改变操作
     * @param {当前页} val
     */
    pageHandler(val) {
      if (val > 0) {
        this.pagination.page = val
      }
      this.getClassStudents()
    },
    editGrades(row) {
      row.loading = true
      const data = {
        studentId: row.userId,
        coursesId: this.tempId.coursesId,
        grades: row.grades
      }
      grades(data).then(res => {
        Message({
          message: '修改分数成功',
          type: 'success',
          duration: 5 * 1000
        })
        // 重新获取课程班级刷新平均值
        this.getCoursesClass()
      }).finally(() => {
        row.loading = false
      })
    },
    showCoursesClass(row) {
      this.dialogShow = true
      this.tempId.coursesId = row.coursesId
      this.getCoursesClass()
    },
    showClassStudent(row) {
      this.innerShow = true
      this.tempId.classId = row.classId
      this.pagination.page = 0
      this.getClassStudents()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    color: #b598a1;
    font-size: 24px;
    line-height: 46px;
    margin: 10px 0 10px 0;
  }
}
</style>
